import { Button, Card, Input, Modal, DatePicker, Space, Table } from 'antd';
import React, { useState,useEffect } from 'react';
import "./Info.css";
import { getInfo, addInfo } from '../../api/index';
const tabListNoTitle = [
    {
        id: 1,
        key: 'newspaper',
        tab: '新闻',
    },
    {
        id: 2,
        key: 'notification',
        tab: '通知',
    },
    {
        id: 3,
        key: 'framework',
        tab: '规章制度',
    },
];
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        key:"标题"
    },
    {
        title: '序号',
        dataIndex: 'age',
        key: "序号"
    },
    {
        title: '内容',
        dataIndex: 'address',
        key: "内容"
    },
    {
        title: '时间',
        dataIndex: 'Date',
        key: "时间"
    },
    {
        title: '操作',
        dataIndex: 'remove',
        key: "操作"
    }
];
const columns1 = [
    {
        title: '序号',
        dataIndex: 'age',
        key:"age",
    },
    {
        title: '内容',
        dataIndex: 'address',
        key: "Date",
    },
    {
        title: '时间',
        dataIndex: 'Date',
        key: "Date",
    },
    {
        title: '操作',
        dataIndex: 'remove',
        key: "remove",
    },
    {
        title: '操作',
        dataIndex: 'update',
        key: "update",
    }
];
// const { RangePicker } = DatePicker;
function Info() {
    // tab切换
    const [activeTabKey2, setActiveTabKey2] = useState('app');
    // 模态框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [infoData1, setInfoData1] = useState([])
    const [infoData2, setInfoData2] = useState([])
    const [infoData3, setInfoData3] = useState([])
    const [astate, setAstate] = useState('')
    const [atitle, setAtitle] = useState('')
    const [acontent, setAcontent] = useState('')
    const [atime, setAtime] = useState('')
    useEffect(()=>{
        getInfo({astate:1}).then(infoData=>{
            let arr=[]
            infoData.map(item=>{
                arr.push({
                    key:item.id,
                    age: item.id,
                    name:item.atitle,
                    address:item.content,
                    Date:item.atime.slice(0,10),
                    remove: <button style={{ border: 0, background: "#fff" }} onClick={() => { console.log(1) }}>删除</button>
                })
            })
            setInfoData1(arr)
        })
        getInfo({ astate: 2 }).then(infoData => {
            let arr = []
            infoData.map(item => {
                arr.push({
                    key: item.id,
                    name: item.atitle,
                    age: item.id,
                    address: item.content,
                    Date: item.atime.slice(0, 10),
                    remove: <button style={{ border: 0, background: "#fff" }} onClick={() => { console.log(1) }}>删除</button>
                })
            })
            setInfoData2(arr)
        })
        getInfo({ astate: 3 }).then(infoData => {
            let arr = []
            infoData.map(item => {
                arr.push({
                    key: item.id,
                    age: item.id,
                    address: item.content,
                    Date: item.atime.slice(0, 10),
                    remove: <button style={{ border: 0, background: "#fff" }} onClick={() => { console.log(1) }}>删除</button>,
                    update: <button style={{ border: 0, background: "#fff" }} onClick={() => { console.log(1) }}>修改</button>
                })
            })
            setInfoData3(arr)
        })
    },[])
    const onTab2Change = (key) => {
        setActiveTabKey2(key);
    };
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        console.log(atitle, acontent, atime, astate)
        addInfo([atitle, acontent, atime, astate]).then(data=>{
            console.log(data)
        })
        setAstate("")
        setAtitle("")
        setAcontent("")
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        // 头部
        <div className="Info">
            <div className='InfoNav'>
                <Input placeholder="查询内容......" />
                <Button size="large">搜索</Button>
                <Button type="primary" size="large" onClick={showModal}>添加</Button>
                <Modal title="信息发送" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <div className='InfoBody'>
                        默认类型：
                        <select name="" id="" value={astate} onChange={(e) => { setAstate(e.target.value)}}>
                            <option value="">请输入...</option>
                            <option value="1">新闻</option>
                            <option value="2">通知</option>
                            <option value="3">规章制度</option>
                        </select>
                        <br />
                        信息标题：<Input placeholder="Basic usage" value={atitle} onChange={(e) => { setAtitle(e.target.value)}} />
                        <br />
                        输入信息：<textarea value={acontent} onChange={(e) => { setAcontent(e.target.value) }}></textarea>
                        <br />
                        发布时间：
                        <Space direction="vertical" size={12} >
                            <DatePicker placeholder={'请选择'}  onChange={(data, dateString) => { setAtime(dateString)}} />
                        </Space>
                    </div>
                </Modal>
            </div>
            <div className="InfoHeader">
                <Card
                    style={{
                        width: '100%',
                    }}
                    tabList={tabListNoTitle}
                    activeTabKey={activeTabKey2}
                    tabBarExtraContent={<a href="#">返回首页</a>}
                    onTabChange={(key) => {
                        onTab2Change(key);
                    }}
                >
                    {
                        activeTabKey2 == 'newspaper' ? <div>
                            <h4>公司新闻</h4>
                            <Table columns={columns} dataSource={infoData1} size="middle" />
                        </div>:""
                    }
                    {
                        activeTabKey2 == 'notification' ? <div>
                            <h4>公司通知</h4>
                            <Table columns={columns} dataSource={infoData2} size="middle" />
                        </div> : ""
                    }
                    {
                        activeTabKey2 == 'framework' ? <div>
                            <h4>规章制度</h4>
                            <Table columns={columns1} dataSource={infoData3} size="middle" />
                        </div> : ""
                    }
                </Card>
            </div>
        </div>
    )
}

export default Info